<template>
	<uni-popup ref="popup" mode="center" type="bottom" border-radius="10px 10px 0 0" mask="true">
		<view class="popUpView">
			<view class="title">获取您的昵称222222、头像</view>
			<view class="img">
				<view>头像</view>
				<view class="imgRight">
					<button class="avatar-box" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<image :src="userInfo.avatar || 'xxx默认头像' "></image>
					</button>
				</view>
			</view>
			<view class="img">
				<view>昵称</view>
				<view class="imgRight">
					<input type='nickname' placeholder="请输入昵称" @blur="blurInput" v-model='userInfo.nickName' :maxlength="16">
				</view>
			</view>
			<view class="phone">
				<view>手机号</view>
				<view class="imgRight">
					<input v-model="userInfo.phone" type='tel' placeholder="请输入手机号" :maxlength="11">
					<button open-type="getPhoneNumber" class="login_button" @getphonenumber="getUserPhone">获取手机号</button>
				</view>
			</view>
			<view class="bottom">
				<button @click="savaInfo" class="save" formType="submit" :class="{'open': userInfo.phone}">
					保存
				</button>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
		import { ref , getCurrentInstance , defineProps, defineEmits } from 'vue'
		const { proxy } = getCurrentInstance()
		//服务器接口地址
		const baseURL = 'http://xxxxxxxx';
		
		// 弹窗
		const show = ()=>{
			proxy.$refs.popup.open()
		}
		defineExpose({
			show
		})
		
		// 用户信息
		const props = defineProps({
			userInfo : Object
		});
		// const emit = defineEmits(['update:userInfo','savaInfo'])
		
		// 微信头像获取
		function onChooseAvatar(e) {
			const {
				avatarUrl
			} = e.detail
			userInfo.value.avatar = avatarUrl
		}
		// 用户昵称
		function blurInput(e){
			userInfo.value.nickName = e.detail.value
		}
		// 获取手机号
		function getUserPhone(e){
			
		}
		// 保存信息
		const savaInfo = () => {
			emit('savaInfo')
		}
</script>

<style lang="scss">
	.popUpView{
		width: 500rpx;
		height: 600rpx;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		margin: auto;
		background-color: #F5F5F5;
		border: 2rpx solid darkred;
		color: #000;
		.title {
			font-size: 30rpx;
			font-weight: bold;
			color: #000;
			margin-bottom: 6rpx;
			padding: 20rpx;
		}
		.avatar-box {
			display: flex;
			align-items: center;
		
			image {
				width: 30rpx;
				height: 30rpx;
				border-radius: 50%;
			}
		}
		
		.img,
		.phone{
			display: flex;
			align-items: center;
			margin: 0 20rpx;
			padding: 30rpx 0;
			border-bottom: 1rpx solid gainsboro;
			button {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 84rpx;
				height: 84rpx;
				border-radius: 6rpx;
				margin: unset;
				padding: unset;
				border: unset;
			}
			.imgRight{
				margin-left: 40rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 80%;
				image{
					width: 80rpx;
					height: 80rpx;
				}
			}
		}
		.phone{
			button {
				font-size: 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 200rpx;
				height: 64rpx;
				border-radius: 6rpx;
				margin: unset;
				padding: unset;
				border: unset;
			}
		}
		
		.bottom {
			display: flex;
			align-items: center;
			justify-content: center;
			
			.save {
				border: 1px solid #F5F5F5;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 368rpx;
				height: 80rpx;
				border-radius: 12rpx;
				margin-top: 52rpx;
				background-color: #F5F5F5;
				color: #ccc;
				font-size: 30rpx;
				font-weight: bold;
			}
		
			.save.open {
				border: 1px solid #fff;
				background-color: #07C160;
				color: #fff;
			}
		}
	}

</style>